<template>
  <div class="jsbsf">
    <p class="top">
      <span style="font-weight: 700; font-size: 16px; color: #000">{{ info.residentName }}</span>
      <span style="display: inline-block; margin: 0 20px"
        >证件号：{{ info.idNo }}</span
      >
      <span>填表人：{{ info.createUserId }}</span>
    </p>
    <div class="box">
      <span>随访时间：</span>
      <el-date-picker
        v-model="info.visitDate"
        align="right"
        type="date"
        placeholder="选择随访时间"
        :picker-options="pickerOptions"
        size="small"
      >
      </el-date-picker>
    </div>
    <div class="box">
      <span>本次随访形式：</span>
      <el-radio-group v-model="info.visitMode">
        <el-radio label="1">门诊</el-radio>
        <el-radio label="2">家庭</el-radio>
        <el-radio label="3">电话</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>若失访,原因：</span>
      <el-radio-group v-model="info.lostVisitReason">
        <el-radio label="1">外出打工</el-radio>
        <el-radio label="2">迁居他处</el-radio>
        <el-radio label="3">走失</el-radio>
        <el-radio label="4">连续3次未到访</el-radio>
        <el-radio label="5">其他</el-radio>
        <el-input
          placeholder="请输入"
          v-model="info.lostVisitReasonOther"
          style="width: 200px"
          size="small"
        >
        </el-input>
      </el-radio-group>
    </div>
    <p style="font-weight: 900; font-size: 20px; color: #000">
      如死亡，日期和原因
    </p>
    <div class="box">
      <span>死亡日期：</span>
      <el-date-picker
        v-model="info.deathDate"
        align="right"
        type="date"
        placeholder="选择死亡日期"
        :picker-options="pickerOptions"
        size="small"
      >
      </el-date-picker>
    </div>
    <div class="box">
      <span>死亡原因：</span>
      <el-radio-group v-model="info.deathCause">
        <el-radio label="1">躯体疾病</el-radio>
        <el-radio label="2">自杀</el-radio>
        <el-radio label="3">他杀</el-radio>
        <el-radio label="4">意外</el-radio>
        <el-radio label="5">精神疾病相关并发症</el-radio>
        <el-radio label="6">其他</el-radio>
        <el-input
          placeholder="请输入"
          v-model="info.deathCauseOther"
          style="width: 200px"
          size="small"
        >
        </el-input>
      </el-radio-group>
    </div>
    <div class="box">
      <span>危险性评估：</span>
      <el-radio-group v-model="info.riskAssessment">
        <el-radio label="1">0级</el-radio>
        <el-radio label="2">1级</el-radio>
        <el-radio label="3">2级</el-radio>
        <el-radio label="4">3级</el-radio>
        <el-radio label="5">4级</el-radio>
        <el-radio label="6">5级</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>既往主要症状：</span>
      <el-checkbox-group v-model="info.symptoms">
        <el-checkbox label="1">幻觉</el-checkbox>
        <el-checkbox label="2">交流困难</el-checkbox>
        <el-checkbox label="3">猜疑</el-checkbox>
        <el-checkbox label="4">喜怒无常</el-checkbox>
        <el-checkbox label="5">行为怪异</el-checkbox>
        <el-checkbox label="6">兴奋话多</el-checkbox>
        <el-checkbox label="7">伤人毁物</el-checkbox>
        <el-checkbox label="8">悲观厌世</el-checkbox>
        <el-checkbox label="9">无故外走</el-checkbox>
        <el-checkbox label="10">自语自笑</el-checkbox>
        <el-checkbox label="11">孤僻懒散</el-checkbox>
        <el-checkbox label="12">其他</el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="box">
      <span>自知力：</span>
      <el-radio-group v-model="info.insight">
        <el-radio label="1">自知力完全</el-radio>
        <el-radio label="2">自知力不全</el-radio>
        <el-radio label="3">自知力缺失</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>睡眠情况：</span>
      <el-radio-group v-model="info.sleep">
        <el-radio label="1">良好</el-radio>
        <el-radio label="2">一般</el-radio>
        <el-radio label="3">较差</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>饮食情况：</span>
      <el-radio-group v-model="info.diet">
        <el-radio label="1">良好</el-radio>
        <el-radio label="2">一般</el-radio>
        <el-radio label="3">较差</el-radio>
      </el-radio-group>
    </div>
    <p style="font-weight: 900; font-size: 20px; color: #000">社会功能情况</p>
    <div class="box">
      <span>个人生活料理：</span>
      <el-radio-group v-model="info.socialLifeCapacity">
        <el-radio label="1">良好</el-radio>
        <el-radio label="2">一般</el-radio>
        <el-radio label="3">较差</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>家务劳动：</span>
      <el-radio-group v-model="info.socialHousework">
        <el-radio label="1">良好</el-radio>
        <el-radio label="2">一般</el-radio>
        <el-radio label="3">较差</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>生产劳动及工作：</span>
      <el-radio-group v-model="info.socialWork">
        <el-radio label="1">良好</el-radio>
        <el-radio label="2">一般</el-radio>
        <el-radio label="3">较差</el-radio>
        <el-radio label="4">此项不适用</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>学习能力：</span>
      <el-radio-group v-model="info.socialLearning">
        <el-radio label="1">良好</el-radio>
        <el-radio label="2">一般</el-radio>
        <el-radio label="3">较差</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>社会人际交往：</span>
      <el-radio-group v-model="info.socialSocial">
        <el-radio label="1">良好</el-radio>
        <el-radio label="2">一般</el-radio>
        <el-radio label="3">较差</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>危险行为：</span>
      <el-checkbox-group v-model="info.dangerousAct">
        <el-checkbox label="1">轻度滋事</el-checkbox>
        <el-input
          placeholder="请输入"
          v-model="info.dangerousActMildTrouble"
          style="width: 200px"
          size="small"
        >
          <template slot="append">次</template>
        </el-input>
        <el-checkbox label="2">肇事</el-checkbox>
        <el-input
          placeholder="请输入"
          v-model="info.dangerousActCauseTrouble"
          style="width: 200px"
          size="small"
        >
          <template slot="append">次</template>
        </el-input>
        <br />
        <el-checkbox label="3">肇祸</el-checkbox>
        <el-input
          placeholder="请输入"
          v-model="info.dangerousActCauseMisfortune"
          style="width: 200px"
          size="small"
        >
          <template slot="append">次</template>
        </el-input>
        <el-checkbox label="4" >其他危害行为</el-checkbox>
        <el-input
          placeholder="请输入"
          v-model="info.dangerousActOtherHarm"
          style="width: 200px"
          size="small"
        >
          <template slot="append">次</template>
        </el-input>
        <br />
        <el-checkbox label="5" >自伤</el-checkbox>
        <el-input
          placeholder="请输入"
          v-model="info.dangerousActAutolesion"
          style="width: 200px"
          size="small"
        >
          <template slot="append">次</template>
        </el-input>
        <el-checkbox label="6" >自杀未遂</el-checkbox>
        <el-input
          placeholder="请输入"
          v-model="info.dangerousActSuicideAttempts"
          style="width: 200px"
          size="small"
        >
          <template slot="append">次</template> </el-input
        ><br />
        <el-checkbox label="7" >无</el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="box">
      <span>两次随访期间关锁情况：</span>
      <el-radio-group v-model="info.twoItlShutCase">
        <el-radio label="1">无关锁</el-radio>
        <el-radio label="2">关锁</el-radio>
        <el-radio label="3">关锁已解除</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>两次随访期间住院情况：</span>
      <el-radio-group v-model="info.twoItlInHospital">
        <el-radio label="1">未住院</el-radio>
        <el-radio label="2">目前正在住院</el-radio>
        <el-radio label="3">曾住院，现未住院</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>实验室检查：</span>
      <el-radio-group v-model="info.laboratory">
        <el-radio label="1">无</el-radio>
        <el-radio label="2">有</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>服药依从性：</span>
      <el-radio-group v-model="info.drugCompliance">
        <el-radio label="1">按医嘱规律用药</el-radio>
        <el-radio label="2">间断用药</el-radio>
        <el-radio label="3">不用药</el-radio>
        <el-radio label="4">医嘱勿需用药</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>药物不良反应：</span>
      <el-radio-group v-model="info.adverseDrugReactions">
        <el-radio label="1">此项不适用</el-radio>
        <el-radio label="2">无</el-radio>
        <el-radio label="3">有</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>治疗效果：</span>
      <el-radio-group v-model="info.effect">
        <el-radio label="1">痊愈</el-radio>
        <el-radio label="2">好转</el-radio>
        <el-radio label="3">无变化</el-radio>
        <el-radio label="4">加重</el-radio>
        <el-radio label="5">此项不适用</el-radio>
      </el-radio-group>
    </div>
    <p style="font-weight: 900; font-size: 20px; color: #000">转诊</p>
    <div class="box">
      <span>是否转诊：</span>
      <el-radio-group v-model="info.referral">
        <el-radio label="1">否</el-radio>
        <el-radio label="2">是</el-radio>
      </el-radio-group>
      <div v-if="info.referral == '2'">
        <span>转诊原因：</span>
        <el-input
          placeholder="请输入"
          v-model="info.referralOther"
          style="width: 200px"
          size="small"
        >
        </el-input>
        <br />
        <span>转诊至机构及科室：</span>
        <el-input
          placeholder="请输入"
          v-model="info.referralDepartment"
          style="width: 200px"
          size="small"
        >
        </el-input>
      </div>
    </div>
    <p style="font-weight: 900; font-size: 20px; color: #000">用药情况</p>
    <div class="box">
      <div>
        <el-input
          placeholder="请输入..."
          v-model="info.药物名称"
          style="width: 600px"
          size="small"
        >
          <template slot="prepend">药物名称</template>
        </el-input> <br>
        <el-input
          placeholder="请输入..."
          v-model="info.用法"
          style="width: 300px; margin-left: 15px"
          size="small"
        >
          <template slot="prepend">用 法</template>
        </el-input>
        <el-input
          placeholder="请输入..."
          v-model="info.每次剂量"
          style="width: 300px; margin-left: 15px"
          size="small"
        >
          <template slot="prepend">每次剂量</template>
        </el-input>
      </div>
    </div>
    <p style="font-weight: 900; font-size: 20px; color: #000">用药指导</p>
    <div class="box">
      <div>
        <el-input
          placeholder="请输入..."
          v-model="info.药物名称"
          style="width: 600px"
          size="small"
        >
          <template slot="prepend">药物名称</template>
        </el-input> <br>
        <el-input
          placeholder="请输入..."
          v-model="info.用法"
          style="width: 300px; margin-left: 15px"
          size="small"
        >
          <template slot="prepend">用 法</template>
        </el-input>
        <el-input
          placeholder="请输入..."
          v-model="info.每次剂量"
          style="width: 300px; margin-left: 15px"
          size="small"
        >
          <template slot="prepend">每次剂量</template>
        </el-input>
      </div>
    </div>
    <div class="box">
      <span>康复措施：</span>
      <el-checkbox-group v-model="info.recovery">
        <el-checkbox label="1">生活劳动能力</el-checkbox>
        <el-checkbox label="2">职业训练</el-checkbox>
        <el-checkbox label="3">学习能力</el-checkbox>
        <el-checkbox label="4">社会交往</el-checkbox>
        <el-checkbox label="5">其他</el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="box">
      <span>此次随访分类：</span>
      <el-radio-group v-model="info.visitClassify">
        <el-radio label="1">不稳定</el-radio>
        <el-radio label="2">基本稳定</el-radio>
        <el-radio label="3">稳定</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <span>下次随访日期：</span>
      <el-date-picker
        v-model="info.nextDate"
        align="right"
        type="date"
        placeholder="选择下次随访日期"
        :picker-options="pickerOptions"
        size="small"
      >
      </el-date-picker>
    </div>
    <div class="box">
      <span>评估医生签名：</span>
      <!-- <el-select
        filterable
        placeholder="请选择"
        size="small"
        style="width: 200px"
        v-model="info.unitName"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        filterable
        placeholder="请选择"
        size="small"
        style="width: 200px; margin-left: 20px"
        v-model="info.executorName"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select> -->
      <el-input
        placeholder=""
        v-model="info.executorName"
        style="width: 220px"
        size="small"
      >
        <!-- <template slot="append">℃</template> -->
      </el-input>
    </div>
    <div class="box">
      <span>随访照片：</span>
      <el-button
        icon="el-icon-upload2"
        type="primary"
        style="background-color: #fff; color: rgb(46, 160, 254)"
        size="small"
        plain
        >本地上传文件</el-button
      >
      <el-button
        icon="el-icon-picture-outline"
        type="primary"
        style="background-color: #fff; color: rgb(46, 160, 254)"
        size="small"
        plain
        >加载手机图片</el-button
      >
      <p style="margin-top: 10px">
        扫描二维码，在手机端点击"上传"图片，在手机端上传后，点击上方"加载手机照片"按钮，即可同步到电脑端
      </p>
      <div>
        <img
          style="width: 100px"
          src="http://8.218.107.5:9992/media/base/zhengjian/qrcode/16863931874Q68253F.png"
          alt=""
        />
        <img
          style="width: 100px; margin-left: 20px"
          src="http://8.218.107.5:9992/media/base/zhengjian/qrcode/16863931874Q68253F.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>
        
        <script>
export default {
  data() {
    return {
      info: {
        hospitalId: "3015",
        idNo: localStorage.getItem('idCard'),
        residentName: "测试患者",
        symptoms:[],
        dangerousAct:[],
        recovery:[]
      },
      options: [
        {
          value: "测试",
          label: "测试",
        },
      ],
      pickerOptions: {
        
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
        ],
      },
      value2: "",
    };
  },
  methods: {
    btn_ok() {
      var url = this.info.id
        ? "/mentalDiseaseVisit/modify"
        : "/mentalDiseaseVisit/add";
      this.info.symptoms = this.info.symptoms.toString();
      this.info.dangerousAct = this.info.dangerousAct.toString();
      this.info.recovery = this.info.recovery.toString();
      var date = new Date();
      this.info.id
        ? (this.info.updatetime = date)
        : (this.info.createtime = date);
      this.$post(url, this.info).then((res) => {
        if (res.code == 400) {
          this.$message({
            message: res.message,
            type: "error",
          });
          return;
        }
        this.$message({
          message: "操作成功",
          type: "success",
        });
      });
    },
    getInfo(item) {
      this.isLoading = true;
      this.info = item;
      this.isLoading = false;
    },
    clear_info() {
      this.info = {
        hospitalId: "3015",
        idNo: localStorage.getItem('idCard'),
        residentName: "测试患者",
        symptoms:[],
        dangerousAct:[],
        recovery:[]
      };
    },
  },
};
</script>
        
        <style scoped lang="scss">
.jsbsf {
  .top {
    padding: 10px 20px;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
  }
  .tab1 {
    tr {
      width: 100%;
      th {
        text-align: center;
        color: #000;
        background-color: rgb(250, 250, 250);
      }
      td {
        padding: 10px;
      }
    }
  }
  .box {
    padding: 10px 250px;
    background-color: rgb(250, 250, 250);
    margin: 10px 0;
  }
}
.table_rd_pd {
  th,
  td {
    padding: 5px 10px;
  }
}
</style>